<template>
    <div class="card-page">
        <tool-bar nav="" :title="action_name + 'Api全局拦截器'">
            <el-button size="small" @click="$router.push('/dev/api-interceptor/add')" v-if="$props.action=='edit'">新建
            </el-button>
            <el-button size="small" @click="save_click" type="primary">保存</el-button>
        </tool-bar>
        <el-row :gutter="12" type="flex">
            <el-col :span="12">
                <kv label="名称">
                    <el-input v-model="info.name" chk="*"/>
                </kv>

                <kv label="备注">
                    <el-input v-model="info.remark" type="textarea"/>
                </kv>


                <el-card shadow="always">
                    <template #header>
                        <span>拦截器(story: ApiStory, api: ApiInstance, globalHeaders: StringMap)</span>

                    </template>
                    <kv label="初始化拦截器">
                        <el-input v-model="info.firstScript" type="textarea" :autosize="{ minRows: 2, maxRows: 8 }"/>
                    </kv>
                    <kv label="请求拦截器">
                        <el-input v-model="info.requestScript" type="textarea" :autosize="{ minRows: 2, maxRows: 8 }"/>
                    </kv>
                    <kv label="响应拦截器">
                        <el-input v-model="info.responseScript" type="textarea" :autosize="{ minRows: 2, maxRows: 8 }"/>
                    </kv>
                </el-card>

            </el-col>
            <el-col :span="12">
                <el-card shadow="always">
                    <template #header> <span>变量内容</span></template>


<el-tag>story: ApiStory</el-tag>
<pre>
"_id" : ObjectId("")
"name": "",
"apiAddress": "",
"apis": [
        {
            "apiDefine" : {
                "productLine" : {
                    "code" : "",
                    "name" : ""
                },
                "group" : "",
                "name" : "",
                "url" : "",
                "httpMethod" : "POST",
                "requestHeaderParameters" : [
                    {
                        "key" : "Authorization",
                        "type" : "Text",
                        "isList" : false,
                        "enumData" : [],
                        "enumType" : "",
                        "stringType" : "Normal",
                        "objectReference" : {
                            "name" : "",
                            "location" : "Request",
                            "_id" : ""
                        },
                        "defaultValue" : "",
                        "multi" : false,
                        "required" : false,
                        "remark" : ""
                    }
                ],
                "requestBodyParameters" : { },
                "requestUrlPathParameters" : [],
                "requestUrlQueryParameters" : [],
                "responseBodyParameters" : { },
                "responseHeaderParameters" : [],
                "remark" : "",
                "_id" : ObjectId("")
            },
            "parameters" : [
                {
                    "key" : "Authorization",
                    "value" : "",
                    "script" : ""
                }
            ],
            "postBodyScript" : "",
            "postBody" : "",
            "remark" : ""
        }
    ]


</pre>
                </el-card>
            </el-col>
        </el-row>


    </div>
</template>

<script setup>
/**
 * Created by CodeGenerator  at 2023-10-23 15:30:57
 */





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"info":{"globalHeaders":{}}});
const info = $computed(()=> $data.info );

const $props = defineProps({
    action: { type: String } ,
    id : { type: String }
});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);


const action_name = $computed( function() {
    return {add: "添加", edit: "修改"}[$props.action]
});

const loadData = async function() {
    if (!$props.id) return;
    let res = await jv.$http.post("/dev/api-interceptor/detail/" + $props.id)
    $data.info = res.data.data;
};
const save_click = async function() {
//校验
    if (jv.chk_main() == false) {
        return;
    }
    let res = await jv.$http.post("/dev/api-interceptor/save", $data.info)
//[axios拦截器中已处理了异常]。
    jv.info(action_name + " 成功");
    let id = res.data.data || $data.info.id;
    if (!id) {
        return jv.error("找不到 id");
    }
    jv.$router.push("/dev/api-interceptor/edit/" + id);
};

onMounted( function() {
    loadData();
} )



</script>

<style scoped lang="scss">
</style>
